<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../文件/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <!-- 练习一 你好+名字-->
    <div id="app">
        <a>{{aa}}</a>
    </div><br><br>
    <script>
        var vm2 = new Vue({
            el:"#app",
            data:{
                name:"赵蕾"
            },
            computed:{
			aa:{
				get:function(){
					let str = `你好：${this.name}`
					return str;
                    }
                 }
		    }
        })
    </script>



    <!-- 练习二：输出数组的和-->
    <div id="num">
        <a>{{numArr}}</a><br>
        <a>数组的和为{{addNum}}</a>
    </div><br>
    <script>
        var vm2 = new Vue({
            el:"#num",
            data: {
                num:0,
                numArr:[2,3,1,5,3]
            },
            computed: {
                addNum: function () {
                    var num = this.num;
                    for(var i=0;i<this.numArr.length;i++){
                        num+=this.numArr[i];
                    }
                    return num;
                }
            }
        })
    </script>

    <!-- 练习三：监听名字变化-->
    <div id="name">
        <p>{{ stuName }}</p>
        <button @click="changeName()">按钮</button>
    </div>

    <script>
        var vm3 = new Vue({
            el: '#name',
            data: {
                stuName:"张三"
            },
            watch: {
                stuName: function () {
                console.log("学生姓名属性发生改变!")
                }
            },
            methods:{
                changeName:function(){
                    this.stuName = "李四";
                }
            }
        })
    </script>
</body>
</html>